<script lang="ts" setup>
import { getFileUrl } from '~/api/file'
import { getbxjkxllmDetail, getdslmList, getsxrbDetail } from '~/api/home'
import { decode } from '~/utils/base/dataEncry'

const router = useRouter()
const TJlist = ref<any[]>([])
const list = ref<any[]>([])
const fileData = ref()
const fileType = ref()
const nowImg = ref()
const nowContents = ref()
const nowName = ref()
const title = ref('书籍展示')
const routePath = [{ name: '首页', path: '/' }, { name: title, path: '/peopleHealth/peopleHealthSeries' }, { name: '书籍内容', path: '' }]
const route = useRoute()
const queryParams = reactive(
  {
    condition: [],
  },
)
const queryParams2 = reactive(
  {
    page: {
      rownumber: 3,
      pageNo: 1,
    },
    order: [{
      colName: 'release_time',
      orderType: 'desc',
    }],
    condition: [
      {
        colName: 'column_recommendation',
        ruleType: 'eq',
        value: '是',
      },
    ],
  },
)
fileData.value = decode(route.query.data)
fileType.value = route.params.id
function getData() {
  if (fileType.value === '长安县志') {
    queryParams.condition = [{ colName: 'pt_uid', ruleType: 'eq', value: fileData.value.pt_uid ? fileData.value.pt_uid : fileData.value.uid }]
    getsxrbDetailData(queryParams)
  }
  else if (fileType.value === '西安年鉴') {
    queryParams.condition = [{ colName: 'pt_uid', ruleType: 'eq', value: fileData.value.pt_uid ? fileData.value.pt_uid : fileData.value.uid }]
    getlnjkbDetailData(queryParams)
  }
  getdslmList(queryParams2).then((res) => {
    TJlist.value = res.data
  }).catch(() => {
  })
}
function getsxrbDetailData(queryParams) {
  getsxrbDetail(queryParams).then((res) => {
    // TJlist.value = res.data.slice(0, 3)
    nowImg.value = res.data[0].cover_file_name
    nowContents.value = res.data[0].contents
    nowName.value = res.data[0].title_name
    fileData.value.origin = res.data[0].origin
    list.value = res.data
  }).catch(() => {
  })
}
function getlnjkbDetailData(queryParams) {
  getbxjkxllmDetail(queryParams).then((res) => {
    // TJlist.value = res.data.slice(0, 3)
    nowImg.value = res.data[0].cover_file_name
    nowContents.value = res.data[0].contents
    nowName.value = res.data[0].title_name
    fileData.value.origin = res.data[0].origin
    list.value = res.data
  }).catch(() => {
  })
}
onMounted(() => {
  getData()
})
onUnmounted(() => {
  //  console.log('onUnmounted');
  // 如果body的display被设置成none,改成unset
  document.body.style.overflow = 'unset'
})
function clickItem(item) {
  fileType.value = item.classify_name.split('/')[1]
  fileData.value = item
  getData()
}

const { collectArticleMap } = storeToRefs(useUserStore())
function changeInfo(item) {
  nowImg.value = item.cover_file_name
  nowContents.value = item.contents
  nowName.value = item.title_name
  fileData.value.origin = item.origin
}
const itemName = computed(() => {
  return nowName.value
})
</script>

<template>
  <div class="bg-[url('/img/index.png')] bg-#F7F9FD bg-no-repeat">
    <ClientOnly>
      <PublicSearch type="书籍展示" />
      <PublicSearchDialog type="书籍展示" />
      <div class="px-40">
        <div class="bg-#fff">
          <CommonPageContainer :title="title" :path="routePath">
            <div class="mt-20px flex justify-between">
              <div class="w-83% bg-#F7F9FD pr-5">
                <div class="flex items-center p-5 text-size-18px">
                  <div class="ml-[-50px] h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                    style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);"
                    @click="router.back()">
                    <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                      <span class="flex items-center -ml-2px" text="#AC8358">&lt;</span>
                    </div>
                  </div>
                  <div class="pl-5 text-#AC8358 font-700">
                    {{ title }}
                  </div>
                </div>
                <div v-if="fileType === '长安县志' || fileType === '西安年鉴'" class="pl-5">
                  <div class="px-10px text-size-32px text-#101010 font-500">
                    {{ fileData.periods }}
                  </div>
                  <div class="flex justify-between px-10px py-2">
                    <div>
                      发布日期：{{ fileData.modify_time }}
                    </div>
                    <div>
                      来源: {{ fileData.modify_user ? fileData.modify_user : fileData.origin }}
                    </div>
                  </div>
                  <div class="flex justify-between">
                    <div class="w-48%">
                      <div class="demo-image__preview image-container">
                        <!-- <img :src="nowImg" alt=""> -->
                        <el-image :src="nowImg" :initial-index="9999" :max-scale="7" :min-scale="0.2"
                          hide-on-click-modal preview-teleported :preview-src-list="[nowImg]" @click="" />
                      </div>
                      <div>
                        <div>本期导读</div>
                        <div v-for="item in list" text="14px" class="flex cursor-pointer items-center py-2"
                          @click="changeInfo(item)">
                          <i v-if="itemName === item.title_name"
                            class="i-ri:arrow-right-circle-line h-25px w-25px cursor-pointer text-#AC8358" />
                          <div :style="itemName === item.title_name ? 'color:#AC8358' : 'color:#333'">
                            {{ item.title_name }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="h-750px w-50% overflow-y-scroll" v-html="nowContents" />
                  </div>
                </div>
                <div v-else-if="fileType === '《三秦百姓健康》杂志'">
                  <PdfView :url="getFileUrl(fileData.pdf_file_name)" />
                </div>
                <div v-else-if="fileType === '电视栏目' || fileType === '广播栏目'">
                  <div class="px-10px text-size-32px text-#101010 font-500">
                    {{ fileData.title_name }}
                  </div>
                  <div class="flex justify-between px-10px py-2">
                    <div>
                      发布日期：{{ fileData.release_time }}
                    </div>
                    <div>
                      来源: {{ fileData.publisher }}
                    </div>
                  </div>
                  <div v-html="fileData.contents" />
                </div>
                <div v-if="fileData && fileData.id" class="flex items-center justify-center pb-46px pt-65px"
                  text="16px #101010">
                  <!-- <div class="mr-14px h-42px w-100px flex cursor-pointer items-center justify-center bg-white" @click="onCollect"> -->
                  <div class="mr-14px h-42px w-100px flex cursor-pointer items-center justify-center bg-white"
                    @click="changeArticleCollect(fileData.uid)">
                    <!-- <img class="pr-12px" src="/img/black_heart.png" alt=""> -->
                    <i class="i-carbon:favorite-filled mr-12px inline-block text-20px"
                      :class="{ 'text-red': collectArticleMap[fileData.uid], 'text-#555': !collectArticleMap[fileData.uid] }" />
                    <span>{{ collectArticleMap?.[fileData.uid] ? '已收藏' : '收藏' }}</span>
                  </div>
                  <div class="h-42px w-100px flex cursor-pointer items-center justify-center bg-white" @click="copyUrl">
                    <img class="pr-12px" src="/img/share.png" alt="">
                    分享
                  </div>
                </div>
                <CommentSection v-if="fileData.uid && fileData.enable_comments === '是'" :uid="fileData.uid"
                  :title="fileData.title_name" />
              </div>
              <div class="w-15%">
                <div>
                  <div class="h-40px flex items-center rounded-tl rounded-tr px-10px py-5px"
                    style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);">
                    <img src="/img/tj.png" alt="">
                    <div class="pl-15px" text="#fff 16px">
                      推荐
                    </div>
                  </div>
                  <div class="rounded-bl rounded-br px-10px py-5px" border="2px solid #AC8358">
                    <div v-for="item in TJlist" :key="item.id" class="cursor-pointer" hover="text-#AC8358"
                      @click="clickItem(item)">
                      <img :src="item.cover_file_name" alt="">
                      <div class="py-10px" text="14px">
                        {{ item.title_name }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </CommonPageContainer>
        </div>
      </div>
    </ClientOnly>
  </div>
</template>

<style>
.image-container {
  position: relative;
  overflow: hidden;
  /* 防止滚动 */
}
</style>
